import React, { useState, useCallback, useEffect, useContext } from 'react'

// 2、导入Route模块
import {
  Redirect,
  Route,
  Switch,
  useLocation,
  useRouteMatch
} from 'react-router-dom'

import './index.css'

import Movies from './home/Movies'
import Profile from './home/Profile'
import Theaters from './home/Theaters'

import MyNavLink from '@/components/MyNavLink'

import { pathContext } from '@/components/PathContext'

const profile = () => {
  return <Profile></Profile>
}

export default function Index() {
  let [routes, setRoutes] = useState([
    {
      id: '001',
      title: '电影',
      path: '/movies/intheaters'
    },
    {
      id: '002',
      title: '影院',
      path: '/theaters'
    },
    {
      id: '003',
      title: '我的',
      path: '/profile'
    }
  ])

  const { state, dispatch } = useContext(pathContext)

  const location = useLocation()
  const match = useRouteMatch({
    path: '/movies'
  })

  // const handleChangePath = useCallback(
  //   path => {
  //     setRoutes(routes => {
  //       routes[0].path = path
  //       return routes
  //     })
  //   },
  //   []
  // )

  // useEffect(() => {
  //   setRoutes(routes => {
  //     routes[0].path = '/movies/comingsoon'
  //     return [
  //       ...routes
  //     ]
  //   })
  // }, [])

  useEffect(() => {
    if (match) {
      setRoutes(routes => {
        routes[0].path = state.path
        return [
          ...routes
        ]
      })
    }
  }, [state.path])

  useEffect(() => {
    if (match) {
      setRoutes(routes => {
        routes[0].path = location.pathname === '/' ? state.path : location.pathname
        return [
          ...routes
        ]
      })
    }
  }, [])

  return (
    <div className="index-wrapper">
      <main>
        <Switch>
          {/* 3、定义路由的路径和组件 */}
          {/* 排他性路由、包容性路由 */}
          
          {/* 四种组件渲染方式 */}
          {/* (1) component */}
          {/* <Route path="/movies" component={Movies}></Route> */}
          <Route path="/movies">
            <Movies 
              // onChangePath={handleChangePath}
            ></Movies>
          </Route>
  
          {/* (2) slot */}
          <Route path="/theaters">
            <Theaters></Theaters>
          </Route>
  
          {/* (3) render */}
          {/* 只有路径匹配，才渲染 */}
          <Route path="/profile" render={profile}></Route>
  
          {/* (4) children */}
          {/* 不管路径是否匹配，组件总是会渲染。且children的值一定要是一个函数 */}
          {/* <Route path="/profile" children={profile}></Route> */}
          {/* <Profile></Profile> */}
          <Redirect from="/" to="/movies/intheaters"></Redirect>
        </Switch>
      </main>
      <ul>
        {
          routes.map(route => {
            return (
              // <li 
              //   key={route.id}
              //   onClick={handleTabClick(route.path)}
              // >{route.title}</li>
              // <li key={route.id}>
              //   <NavLink exact to={route.path}>{route.title}</NavLink>
              // </li>
              <MyNavLink
                key={route.id}
                route={route}
              ></MyNavLink>
            )
          })
        }
      </ul>
    </div>
  )
}
